import React, {FC} from 'react';
import {View, Text, StyleSheet, Image, TextInput} from 'react-native';
import ArticleDetailStore from '../../stores/ArticleDetailStore';
import {observer} from 'mobx-react';
import UserStore from '../../stores/UserStore';
import icon_default_avatar from '../../assets/icon_default_avatar.png';
import CommentList from './CommentList';
type PropsType = {};
const Comments: FC<PropsType> = observer(() => {
  const {comments} = ArticleDetailStore.detail;
  const {avatar} = UserStore.userInfo;
  console.log('Comments avatar', avatar);
  const count = comments?.length;
  return (
    <>
      <Text style={styles.commentCountTxt}>
        {count ? `共${count}条评论` : '暂无评论'}
      </Text>
      <View style={styles.inputLayout}>
        <Image
          style={styles.avatarImg}
          source={avatar ? {uri: avatar} : icon_default_avatar}
        />
        <TextInput
          style={styles.commentInput}
          placeholder="说点什么吧，万一火了呢～"
          placeholderTextColor="#bbb"
        />
      </View>
      {!!count && (
        <View style={styles.commentsContainer}>
          <CommentList comments={comments} />
        </View>
      )}
    </>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    alignItems: 'center',
  },
  commentCountTxt: {
    fontSize: 14,
    color: '#666',
    marginTop: 20,
    marginLeft: 16,
  },
  inputLayout: {
    width: '100%',
    flexDirection: 'row',
    padding: 16,
    alignItems: 'center',
  },
  avatarImg: {
    width: 32,
    height: 32,
    borderRadius: 16,
    resizeMode: 'contain',
  },
  commentInput: {
    flex: 1,
    marginLeft: 10,
    height: 32,
    borderRadius: 16,
    backgroundColor: '#ddd',
    fontSize: 14,
    color: '#333',
    paddingVertical: 0,
    paddingHorizontal: 12,
  },
  commentsContainer: {
    paddingTop: 16,
    paddingBottom: 32,
  },
  commentItemContainer: {
    width: '100%',
    flexDirection: 'column',
    paddingBottom: 16,
  },
  commentItem: {
    width: '100%',
    flexDirection: 'row',
    paddingHorizontal: 16,
  },
  commentAvatarImg: {
    width: 40,
    height: 40,
    borderRadius: 20,
    resizeMode: 'contain',
  },
  commentLayout: {
    flex: 1,
    flexDirection: 'column',
    paddingHorizontal: 12,
    paddingBottom: 16,
  },

  usernameTxt: {
    fontSize: 14,
    color: '#999',
  },
  messageTxt: {
    fontSize: 14,
    color: '#333',
    marginTop: 6,
  },
  timeAndLocationTxt: {
    fontSize: 12,
    color: '#999',
  },
  favoriteLayout: {
    width: 40,
    flexDirection: 'column',
    alignItems: 'center',
  },
  favoriteImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  favoriteTxt: {
    fontSize: 14,
    color: '#999',
    marginTop: 4,
  },
  divider: {
    width: '100%',
    height: 1,
    backgroundColor: '#ddd',
    marginLeft: 60,
  },
});
export default Comments;
